<template>
  <div class="pages xzmanage">
    <!-- 基础信息 -->
    <div class="infon">
      <div class="infon_text">
        <span class="infon_shu"></span>
        <span class="infon_text_t"> 基础信息</span>
      </div>
      <div class="infon_from">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" @submit.native.prevent>
          <el-form-item label="姓名" prop="name">
            <el-input placeholder="请输入姓名" v-model="ruleForm.name" size="small" clearable maxlength="15"></el-input>
            <span style="font-size:13px;color:#ccc">(最多15个字)</span>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input placeholder="请输入手机号" v-model.number="ruleForm.phone" size="small" clearable maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio label="0" value="0">男</el-radio>
              <el-radio label="1" value="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
            <el-date-picker value-format='yyyy-MM-dd' v-model="ruleForm.birthday" type="date" size="small" placeholder="选择日期" style="width:200px;">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="年龄" prop="resourcea">
            <el-radio-group v-model="ruleForm.resourcea">
              <el-radio label="小于20岁"></el-radio>
              <el-radio label="20岁-30岁"></el-radio>
              <el-radio label="30岁-40岁"></el-radio>
              <el-radio label="40-50岁"></el-radio>
              <el-radio label="50岁以上"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="与宝宝关系" prop="resourceb">
            <el-radio-group v-model="ruleForm.resourceb" @change="babyrelationship">
              <el-radio label="爸爸"></el-radio>
              <el-radio label="妈妈"></el-radio>
              <el-radio label="外祖父"></el-radio>
              <el-radio label="外祖母"></el-radio>
              <el-radio label="叔叔阿姨"></el-radio>
              <el-radio label="其他"></el-radio>
              <el-input type="text" v-model="ruleForm.otherRelation" style="width:100px;margin-left:15px" class="ring-inp" size="small" clearable></el-input>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="当前状态" prop="resourcec">
            <el-radio-group v-model="ruleForm.resourcec" :change="child()">
              <el-radio label="3" value="3">备孕中</el-radio>
              <el-radio label="2" value="2">已有宝宝</el-radio>
              <el-radio label="1" value="1">怀孕中</el-radio>
            </el-radio-group>&nbsp;&nbsp;&nbsp;
            <!-- <font>预产期</font>&nbsp;&nbsp;&nbsp;
            <el-date-picker :disabled="expect" size="mini" v-model="ruleForm.childbirth" format="yyyy年 MM 月 dd 日" value-format="yyyy-MM-dd" type="date">
            </el-date-picker> -->
          </el-form-item>
          <div class="infon_text">
            <span class="infon_shu"></span>
            <span class="infon_text_t"> 宝宝信息</span>
            <el-button @click="addbaby()" type="primary" size="small">添加宝宝</el-button>
          </div>
          <div class="babyinfor" v-for="(el,index) in num" :key="el" :index='index'>
            <div class="babyinfor_model">
              <!-- <div class="iconDelete" @click="deletesbaby(el)">删除</div> -->
              <div>
                <i class="el-icon-delete iconDelete" @click="deletesbaby(index)"></i>
              </div>
              <el-row>
                <el-form-item label="姓名" prop="babyname">
                  <el-input placeholder="请输入姓名" maxlength="15" v-model="ruleForm.babyname[el-1]" size="small" clearable style="width:200px;"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="babygen">
                  <el-radio-group v-model="ruleForm.babygen[el-1]">
                    <el-radio label="0" value="0">男宝宝</el-radio>
                    <el-radio label="1" value="1">女宝宝</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-row>

              <el-row>
                <el-form-item label="宝宝生日" prop="babybirthday">
                  <el-date-picker value-format='yyyy-MM-dd' v-model="ruleForm.babybirthday[el-1]" type="date" size="small" placeholder="选择日期" style="width:200px;">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="宝宝身高(cm):" prop="babyshengao" class="shengao">
                  <baby-input :val.sync='ruleForm.babyshengao[el-1]' :placeholder="placeholders"></baby-input>
                </el-form-item>
              </el-row>

              <el-form-item label="宝宝体重(kg):" prop="babyti" class="shengao">
                <baby-input :val.sync='ruleForm.babyti[el-1]' :placeholder="placeholder"></baby-input>
              </el-form-item>
            </div>
          </div>
          <div class="infon_text">
            <span class="infon_shu"></span>
            <span class="infon_text_t"> 会员属性</span>
          </div>
          <el-form-item label="会员等级" prop="vipregion">
            <el-select v-model="ruleForm.vipregion" placeholder="请选择会员等级">
              <el-option v-for="item in tableData3" :key="item.value" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="剩余积分" prop="vipname">
            <el-input value="${-amount}" placeholder="输入积分值" maxlength="9" v-model="ruleForm.vipname" size="small"></el-input>
          </el-form-item>
          <el-form-item label="余额" prop="vipnameyu">
            <el-input :disabled="isShop!='0'" value="${-amount}" placeholder="保留小数点后两位" maxlength="9" v-model="ruleForm.vipnameyu" size="small"></el-input>
          </el-form-item>
          <el-form-item style="width:500px; margin:0 auto;">
            <el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import s from "@/util/state";
import { levelList, newMember ,getMemberLevelList} from "@/api";
import babyInput from "@/components/SdInput";
export default {
  components: {
    babyInput
  },
  computed: mapState([
    "sub",
    "power",
    "merchantId",
    "linkName",
    "mobile",
    "isShop"
  ]),

  data() {
    return {
      placeholder: "请输入宝宝体重",
      placeholders: "请输入宝宝身高",
      tableData3: [],
      value: "",
      addbabyif: false,
      expect: true,
      ruleForm: {
        name: "",
        phone: "",
        resource: "",
        birthday: "",
        resourcea: "",
        resourceb: "",
        resourcec: "",
        childbirth: "",
        babyname: [],
        babygen: [],
        babybirthday: [],
        membership: [],
        babyshengao: [],
        babyti: [],
        vipregion: "",
        vipname: "0",
        vipnameyu: "0",
        babyarr: [],
        otherRelation: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "长度在 1 到 15  个字符",
            trigger: "blur"
          },
          { validator: util.valida, trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: util.validatePhone, trigger: "blur" },
          { validator: util.numall, trigger: "blur" }
        ],
        nameage: [
          { required: true, message: "请输入宝宝生日", trigger: "blur" }
        ],
        resource: [
          { required: true, message: "请选择性别", trigger: "change" }
        ],
        birthday: [
          { required: true, message: "请选择生日", trigger: "change" }
        ],
        resourcesex: [
          { required: true, message: "请选择性别", trigger: "change" }
        ],
        resourcea: [
          { required: true, message: "请选择年龄", trigger: "change" }
        ],
        resourceb: [
          { required: true, message: "请选择与宝宝关系", trigger: "change" }
        ],
        resourcec: [
          { required: true, message: "请选择当前状态", trigger: "change" }
        ],
        vipregion: [
          { required: true, message: "请选择会员等级", trigger: "change" }
        ],
        vipname: [
          { validator: util.checkSpace, trigger: "blur" },
          { validator: util.numall, trigger: "blur" }
        ],
        vipnameyu: [
          { validator: util.checkSpace, trigger: "blur" },
          { validator: util.validatenum1, trigger: "blur" }
        ],
        babyname: [
          { required: true, message: "请输入性别", trigger: "blur" },
          { validator: util.valida, trigger: "blur" }
        ],
        babygen: [{ required: true, message: "请选择性别", trigger: "change" }],
        babybirthday: [
          { required: true, message: "请选择宝宝生日", trigger: "change" }
        ]
      },
      fromnoe: {
        typea: []
      },
      form: {
        dname: "",
        phone: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: []
      },
      addbaby1: false,
      num: 0,
      babyrelat: ""
    };
  },
  mounted() {
    this.addbabyif = false;
    this.member();
  },
  methods: {
    // numall: numall,
    // 选择与宝宝关系
    babyrelationship(val) {
      this.babyrelat = val;
    },
    member() {
      let data = {
        orgId: this.merchantId,
      };
      getMemberLevelList(data).then(res => {
        if (res.data != null) {
          res.data.forEach(ele => {
             if(ele.levelType=='1'){
               this.ruleForm.vipregion=ele.id
             }
          });
          this.tableData3 = res.data;
        }
      });
    },
    child() {
      if (this.ruleForm.resourcec == 3) {
        this.expect = false;
      } else if (this.ruleForm.resourcec == 1) {
        this.expect = true;
      } else if (this.ruleForm.resourcec == 2) {
        this.expect = true;
      }
    },
    addbaby() {
      this.num++;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.list();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      history.back();
    },
    list() {
      this.ruleForm.babyarr = [];
      for (var i = 0; i < this.ruleForm.babyname.length; i++) {
        let a = {
          name: this.ruleForm.babyname[i],
          gender: this.ruleForm.babygen[i],
          birthday: this.ruleForm.babybirthday[i],
          height: this.ruleForm.babyshengao[i],
          weight: this.ruleForm.babyti[i]
        };
        this.ruleForm.babyarr.push(a);
      }
      var Data = {
        storeId: this.merchantId,
        name: this.ruleForm.name,
        phone: this.ruleForm.phone,
        gender: this.ruleForm.resource,
        birthday: this.ruleForm.birthday,
        memberAge: this.ruleForm.resourcea,
        babyRelation: this.ruleForm.resourceb,
        // 其他
        // babyRelation: this.ruleForm.otherRelation,
        currentState: this.ruleForm.resourcec,
        confinement_date: this.ruleForm.childbirth,
        babies: this.ruleForm.babyarr,
        levelId: this.ruleForm.vipregion,
        integral: this.ruleForm.vipname,
        currentAmount: this.ruleForm.vipnameyu
      };
      if (this.babyrelat == "其他" && this.ruleForm.otherRelation == "") {
        this.$message({
          type: "error",
          message: "请输入与宝宝关系"
        });
      } else {
        newMember(Data).then(res => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg
            });
            util.routerTo("/operate-management/member-management/member-list");
          } else {
            this.$message({
              type: "error",
              message: res.msg
            });
          }
        });
      }
    },
    // 删除宝宝信息
    deletesbaby(el) {
      this.ruleForm.babyname.splice(el, 1);
      this.ruleForm.babygen.splice(el, 1);
      this.ruleForm.babybirthday.splice(el, 1);
      this.ruleForm.babyshengao.splice(el, 1);
      this.ruleForm.babyti.splice(el, 1);
      this.ruleForm.babyarr.splice(el, 1);
      this.num--;
    }
  }
};
</script>
<style>
.babyinfor .shengao .el-form-item__label {
  width: 150px !important;
}
.babyinfor .shengao {
  width: 400px;
}
</style>
<style scoped>
.commonInput {
  width: 200px;
  height: 22px;
  border: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  text-indent: 10px;
}
.infon .infon_from {
  margin-top: 15px;
}
.infon .infon_from .el-input {
  width: 350px;
}
.babyinfor {
  /* height: 150px; */
  width: 90%;
  max-width: 1150px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #fff;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 1px dashed #ccc;
  border-radius: 8px;
  padding-top: 20px;
  box-sizing: border-box;
  position: relative;
}
.babyinfor .babyinfor_model {
  padding-left: 30px;
  /* position: relative; */
}
.babyinfor .el-form-item {
  float: left;
  margin-right: 50px;
  /*margin-top:20px;*/
}

.ring-age strong {
  width: 200px;
  height: 30px;
  line-height: 20px;
}
.age-span {
  float: left;
  width: 80px;
  height: 20px;
  position: absolute;
  font-size: 14px;
  left: 290px;
  top: 8px;
}
.head-one {
  width: 98%;
  height: 50px;
  line-height: 50px;
  text-indent: 20px;
  font-size: 18px;
  color: #666;
  margin: 0 auto;
  border-bottom: 1px dashed #c9c9c9;
}
.contents {
  width: 98%;
  position: relative;
}
.content-ones {
  width: 100%;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.cont-left {
  width: 200px;
  margin-top: 10px;
  float: left;
}
.cont-left li {
  color: #606266;
  font-size: 16px;
  line-height: 48px;
  text-align: right;
}
.cont-left li span {
  color: #ff3866;
}

.cont-ringth {
  width: 800px;
  height: 230px;
  margin-top: 10px;
  background: #fff;
  float: left;
}
.cont-ringth .ring-ul li {
  width: 425px;
  font-size: 16px;
  margin-left: 10px;
  line-height: 50px;
}
.cont-ringth .ring-ul li input {
  width: 330px;
  color: #b4b4b4;
  height: 28px;
}

.cont-ringth .ring-ul li span {
  color: #ccc;
  font-size: 12px;
  margin-left: 6px;
}
.cont-ringth .ring-two {
  width: 425px;
  margin-top: 10px;
  margin-left: 14px;
  height: 28px;
}
.ring-age {
  width: 730px;
  margin-top: 18px;
  margin-left: 14px;
  position: relative;
  height: 28px;
}
.ring-ages {
  width: 880px;
  margin-top: 18px;
  margin-left: 14px;
  height: 50px;
}
.content-bottom .ring-inp {
  margin-top: -10px;
  margin-left: 10px;
  width: 80px;
  height: 30px;
}
.content-bottom .ring-inpu {
  margin-top: -10px;
  margin-left: 10px;
  margin-right: 70px;
  width: 100px;
  height: 30px;
}
.head-two {
  float: left;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-indent: 20px;
  font-size: 18px;
  color: #666;
  margin: 0 auto;
  border-bottom: 1px dashed #c9c9c9;
  margin-top: 10px;
}
.vip-two {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-indent: 20px;
  font-size: 18px;
  color: #666;
  margin: 0 auto;
  border-bottom: 1px dashed #c9c9c9;
  margin-top: 10px;
}
.two-button {
  width: 90px;
  height: 30px;
  background: #169bd5;
  color: #fff;
  border-radius: 8px;
  border: none;
  margin-left: 10px;
}
.prepros {
  width: 90%;
  height: 250px;
  margin: 0 auto;
  border-radius: 10px;
  border: 1px dashed #c9c9c9;
}
.prepro-two {
  position: absolute;
  top: 25px;
  left: 195px;
}
.prepro-left {
  position: absolute;
  top: 85px;
  left: 195px;
}
.prepro-left1 {
  position: absolute;
  top: 130px;
  left: 195px;
}
.prepro-left2 {
  position: absolute;
  top: 170px;
  left: 195px;
}
.grout {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
  border-radius: 10px;
  border: 1px dashed #c9c9c9;
}
.grout-ringth {
  margin-top: 20px;
  margin-left: 100px;
  width: 990px;
  background: #fff;
}
.ring-input {
  float: left;
  margin-top: 6px;
  width: 130px;
  height: 30px;
}
.ringth-one {
  width: 990px;
  height: 64px;
}
.box1 {
  float: left;
  width: 260px;
}
.box2 {
  float: left;
  width: 390px;
  height: 46px;
}
.box1-1 {
  line-height: 46px;
}
.ring-agend {
  width: 880px;
  margin-top: 18px;
  margin-left: 14px;
  height: 15px;
}
.ring-agend h1 {
  width: 88px;
  line-height: 22px;
  font-size: 14px;
  color: #707070;
  float: left;
}
.frame {
  position: relative;
  z-index: 100;
  margin-top: 24px;
}
.head-number {
  width: 90%;
  height: 50px;
  line-height: 50px;
  text-indent: 20px;
  font-size: 18px;
  color: #666;
  margin: 0 auto;
  border-bottom: 1px dashed #c9c9c9;
  margin-top: 10px;
}
.font {
  width: 90%;
  margin: 0 auto;
  height: 200px;
  position: relative;
}
.font-save {
  width: 120px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: #169bd5;
  color: #fff;
  position: absolute;
  bottom: 20px;
  left: 200px;
}
.font-cancel {
  width: 120px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #8a8a8a;
  background: #fff;
  color: #8a8a8a;
  position: absolute;
  bottom: 20px;
  left: 410px;
}
.content-top {
  width: 250px;
  margin-left: 115px;
  margin-top: 10px;
  position: relative;
}
.vip-top {
  width: 250px;
  margin-left: 115px;
  margin-top: 20px;
  position: relative;
}
.contents span {
  font-size: 10px;
  color: #ccc;
  width: 80px;
  position: absolute;
  top: 0;
  left: 160px;
}
.content-bottom {
  width: 750px;
  margin-left: 115px;
  margin-top: 10px;
  position: relative;
}
.gai {
  width: 280px;
  float: left;
}
.ringth-hdmc {
  float: left;
  width: 300px;
}
.ycq {
  width: 300px;
}
.prepros-left {
  margin: 35px;
}
.prepros-zz {
  width: 800px;
}
</style>
